{include file="public/layout" /}
<script type="text/javascript" src="__PUBLIC__/plugins/Echarts/echarts.min.js"></script>
<link href="__SKIN__/css/main_new.css?v={$version}" rel="stylesheet" type="text/css">
<body class="bodystyle" style="cursor: default; -moz-user-select: inherit;min-width:auto;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
{include file="statistics/left" /}
<div class="page pb15" style="min-width:auto;margin-left:100px;">
    <div class="flexigrid">
        <div class="mDiv">
            <div class="ftitle">
                <h3>数据统计</h3>
            </div>
        </div>
        <div class="list-stats">
            <div class="stats-con">
                下单日期 &nbsp;<input type="text" class="input-txt" id="eYLaydateTimeLinkage" name="add_time" data-max_date="{php}echo date('Y-m-d');{/php}" data-callback="TimeProcessing(null, null, value);" autocomplete="off" value="{$StartTime|MyDate='Y-m-d',###} ~ {$EndTime|MyDate='Y-m-d',###}" placeholder="商品下单时间" lay-key="1" style="width: 180px;">
                &nbsp; &nbsp;
                <a href="javascript:void(0);" onclick="new_TimeProcessing(this, 'day', 7);">近7天</a>
                &nbsp; &nbsp;
                <a href="javascript:void(0);" onclick="new_TimeProcessing(this, 'day', 30);">近30天</a>
                &nbsp; &nbsp;
                <a href="javascript:void(0);" onclick="new_TimeProcessing(this, 'year', 12);">近一年</a>
            </div>
            <script type="text/javascript">
                function new_TimeProcessing(obj, type, num)
                {
                    var value = '';
                    if ('day' == type) {
                        var list = eyou_getDateRange(new Date(), num - 1, true);
                        value = list[0] + ' ~ ' + list[1];
                        $('#eYLaydateTimeLinkage').val(value);
                        TimeProcessing(obj, null, value);
                    } else if ('year' == type) {
                        var list = eyou_getDateRange(new Date(), 365 - 1, true);
                        value = list[0] + ' ~ ' + list[1];
                        $('#eYLaydateTimeLinkage').val(value);
                        TimeProcessing(obj, null, value);
                    }
                }
                
                // 处理时间并查询数据
                function TimeProcessing(obj, Start, End ,Year) {
                    if (End && End.indexOf("~") != -1) {
                        var time_rand = End;
                        var arr = time_rand.split(' ~ ');
                        Start = arr[0];
                        End   = arr[1];
                    } else {
                        // Start = Start ? Start : $('#add_time').val();
                        // End   = End ? End : $('#end_time').val();
                    }
                    if (!Year && Start && End) {
                        // if (End < Start) {
                        //     $('body').click();
                        //     layer.msg('结束日期不可早于开始日期', {icon: 2,time: 2000});
                        //     return false;
                        // }
                        Year = 0;
                    }
                    if ((!End || !Start) && !Year) return false;
                    
                    var Url = "{:url('Statistics/GetTimeUsersData')}";
                    $.ajax({
                        url  : Url,
                        type : 'post',
                        data : {StartNew:Start, EndNew:End, Year:Year, _ajax:1},
                        dataType : 'json',
                        success : function(res){
                            layer.closeAll();
                            $('#NewUsers').empty().html(res.data.NewUsers);
                            $('#OrderUsers').empty().html(res.data.OrderUsers);
                            $('#RechargeUsers').empty().html(res.data.RechargeUsers);
                            $('#CouponUsers').empty().html(res.data.CouponUsers);
                            if (res.data.Start) $('#add_time').val(res.data.Start);
                            if (res.data.End) $('#end_time').val(res.data.End);
                            if (obj) {
                                $('.stats-con a').css('color', '');
                                $(obj).css('color', 'red');
                            }
                        }
                    });
                }
            </script>

            <ul class="stats2">
                <li>
                    <div class="card_box">
                        <div class="car_box_l fl">
                            <i class="iconfont e-geren"></i>
                        </div>
                        <div class="car_box_r fl">
                            <h1>新增会员数</h1>
                            <p><cite id="NewUsers">{$totalData.NewUsers}</cite></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card_box">
                        <div class="car_box_l fl">
                            <i class="iconfont e-wenzhangdingdan"></i>
                        </div>
                        <div class="car_box_r fl">
                            <h1>下单会员数</h1>
                            <p><cite id="OrderUsers">{$totalData.OrderUsers}</cite></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card_box">
                        <div class="car_box_l fl">
                            <i class="iconfont e-jine"></i>
                        </div>
                        <div class="car_box_r fl">
                            <h1>充值会员数</h1>
                            <p><cite id="RechargeUsers">{$totalData.RechargeUsers}</cite></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="card_box">
                        <div class="car_box_l fl">
                            <i class="iconfont e-youhuiquan"></i>
                        </div>
                        <div class="car_box_r fl">
                            <h1>领券会员数</h1>
                            <p><cite id="CouponUsers">{$totalData.CouponUsers}</cite></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="page mt10 pb15" style="min-width:auto;margin-left:100px;">
    <div class="flexigrid">
        <div class="mDiv">
            <div class="ftitle">
                <h3>近七日交易走势</h3>
            </div>
        </div>
        <div class="list-stats">
            <div class="stats-con">
                <div id="stats-box" style="width:90%;height:400px;margin: 0 auto;"></div>

            </div>
        </div>
    </div>
</div>
<div class="page mt10 pb15" style="min-width:auto;margin-left:100px;">
    <div class="flexigrid">
        <div class="mDiv">
            <div class="ftitle">
                <h3>用户消费榜</h3>
            </div>
        </div>
        <div class="list-stats">
            <div class="stats-con">
                <table border="" cellspacing="" cellpadding="" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="w100 tc">
                                <div>排名</div>
                            </th>
                            <th class="">
                                <div>用户昵称</div>
                            </th>
                            
                            <th class="w180 tc">
                                <div>会员等级</div>
                            </th>
                            <th class="w180 tc">
                                <div>消费金额</div>
                            </th>
                            <th class="w180 tc">
                                <div>订单数量</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {volist name="$UserConsumption" id="vo"}
                            <tr>
                                <td>
                                    <div class="tc">{lt name="$i" value="4"}<img src="__SKIN__/images/0{$i}.png">{else/}{$i}{/lt}</div>
                                </td>
                                <td>
                                    <!-- 请添加会员详情链接 -->
                                    <div>{$vo.nickname}</div>
                                </td>
                                <td class="tc">
                                    <div>{$vo.level_name}</div>
                                </td>
                                <td>
                                    <div class="tc">{$vo.amount}</div>
                                </td>
                                
                                <td>
                                    <div class="tc">{$vo.count}</div>
                                </td>
                            </tr>
                        {/volist}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    try{
        if (typeof(eval('is_conceal_1649209614'))=="function" && is_conceal_1649209614()){
            $(".page").css("margin-left","");
            $(".page").css("min-width","");
            $(".stats-content").css("min-width","");
            $(".stats-content").css("margin-left","");
            $(".stats-content").css("width","");
        }else{
            $(".page").css("margin-left","100px");
            $(".page").css("min-width","auto");
            $(".stats-content").css("min-width","auto");
            $(".stats-content").css("margin-left","100px");
            $(".stats-content").css("width","calc(100% - 100px)");
        }
    }catch(e){}
    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if(day <= n) {
            if(mon > 1) {
                mon = mon - 1;
            } else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('stats-box'));

    // 指定图表的配置项和数据
    var option = {
        color: ['#3398DB'],
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['新增会员数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [getBeforeDate(6), getBeforeDate(5), getBeforeDate(4), getBeforeDate(3), getBeforeDate(2), getBeforeDate(1), getBeforeDate(0)],
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#eee'],
                    width: 1,
                    type: 'solid'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#eee'],
                    width: 1,
                    type: 'solid'
                }
            }
        },
        series: [{
                name: '新增会员数',
                type: 'line',
                data: ['{$NewUsersNum.0}','{$NewUsersNum.1}','{$NewUsersNum.2}','{$NewUsersNum.3}','{$NewUsersNum.4}','{$NewUsersNum.5}','{$NewUsersNum.6}'],
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
</script>

<!-- 日期联动选择js文件 start -->
{eyou:static file="__PUBLIC__/static/common/js/ey_laydate_time_linkage.js"/}
<!-- 日期联动选择js文件 end -->
{include file="public/footer" /}
</body>